<!doctype html>
<html lang="en-US">

  <head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="WhitestormJS is a 3D Javascript engine based on Three.js (http://threejs.org/). It uses physics and effects libraries to define WhitestormJS API that contains useful scripts for terrain generation, skybox, animation, physics simulation and post-effects. WhitestormJS simplifies Three.js object crafting algorithm to javascript methods with parameters." />
    <meta name="keywords" content="three.js,cannon.js,webgl,wagner,WHS.API,3d,web,javascript" />
    <meta name="author" content="Alexander Buzin">
    <meta property="og:title" content="WhitestormJS 3D Engine" />
    <meta property="og:site_name" content="WhitestormJS 3D Engine" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="en_US">
    <meta property="og:url" content="http://www.jsdelivr.com/projects/whitestormjs" />
    <meta property="og:description" content="WhitestormJS is a 3D Javascript engine based on Three.js (http://threejs.org/). It uses physics and effects libraries to define WhitestormJS API that contains useful scripts for terrain generation, skybox, animation, physics simulation and post-effects. WhitestormJS simplifies Three.js object crafting algorithm to javascript methods with parameters." />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@whitestormjs" />
    <meta name="twitter:title" content="whitestormjs" />
    <meta name="twitter:description" content="WhitestormJS 3D Engine" />
    <link rel="shortcut icon" type="image/x-icon" href="http://whitestormjs.xyz/favicon.ico" />
    <link rel="apple-touch-icon-precomposed" href="http://whitestormjs.xyz/favicon.ico" sizes="57x57" />
    <meta name="msapplication-square150x150logo" content="../development/art/logo/Icon-72@2.png" />
  </head>
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Cabin|Fjalla+One|Montserrat|Oxygen');

    html, body {
      position: relative;
      height: 100%;
      margin:0;
      padding: 0;
      overflow: hidden;
      background: #262C38;
    }

    div.sidebar {
      width: 300px;
      float: left;
      position: relative;
      height: 100%;
      overflow: auto;
    }

    .sidebar h1 {
      font-family: 'Montserrat', sans-serif;
      color: white;
      text-align: center;
    }

    ul {
      color: white;
      list-style: none;
    }

    li.h {
      color: white;
      text-decoration: none;
      font-family: 'Oxygen', sans-serif;
      font-size: 14pt;
      font-weight: bold;
      line-height: 2;
      padding-top: 15px;
    }

    li a {
      color: white;
      text-decoration: none;
      font-family: 'Oxygen', sans-serif;
    }

    li a:hover {
      text-decoration: underline;
    }

    iframe {
      width: calc(100% - 300px);
      float: right;
      height: 100%;
      border: none;
    }

    a.source {
      position: fixed;
      bottom: 50px;
      right: 50px;
      color: white;
      border: 2px solid white;
      padding: 5px 10px;
      border-radius: 5px;
      text-decoration: none;
      font-family: 'Oxygen', sans-serif;
      transition: all 0.1s linear;
    }

    a.source:hover {
      background: #fff;
      color: #078BDA;
    }
  </style>
  <body>
  <div class="sidebar">
    <h1>Examples</h1>

    <ul>
      <li class="h">Basic</li>
      <li><a href="#basic/helloworld">basic / helloworld</a></li>
      <li><a href="#basic/model">basic / model</a></li>
      <li><a href="#basic/mouse">basic / mouse</a></li>
      <li><a href="#basic/debugging">basic / debugging</a></li>
      <li><a href="#basic/extending">basic / extending</a></li>
      <li><a href="#basic/threejs">basic / threejs</a></li>
      <li><a href="#basic/embeded">basic / embeded</a></li>
      <!--<li><a href="#basic/extending">basic / extending</a></li>
      <li><a href="#basic/cloth">basic / cloth</a></li>
      <li><a href="#basic/cloth2">basic / cloth2</a></li>
      <li><a href="#basic/cloth3">basic / cloth3</a></li>
      <li><a href="#basic/wip">basic / wip</a></li>-->
      <li class="h">Softbody</li>
      <li><a href="#softbody/sphere">softbody / sphere</a></li>
      <li><a href="#softbody/cloth">softbody / cloth</a></li>
      <li><a href="#softbody/cloth2">softbody / cloth2</a></li>
      <li><a href="#softbody/cloth3">softbody / cloth3</a></li>
      <li><a href="#softbody/ropes">softbody / ropes</a></li>
      <li class="h">Design</li>
      <li><a href="#design/easter">design / easter</a></li>
      <li><a href="#design/points">design / points</a></li>
      <li><a href="#design/saturn">design / saturn</a></li>
      <li class="h">Physics</li>
      <li><a href="#constraints/dof">constraints / dof</a></li>
      <li><a href="#constraints/hinge">constraints / hinge</a></li>
      <li><a href="#constraints/point">constraints / point</a></li>
      <li><a href="#constraints/slider">constraints / slider</a></li>
      <li><a href="#physics/domino">physics / domino</a></li>
      <li><a href="#physics/compound">physics / compound</a></li>
      <li><a href="#physics/filtering">physics / filtering</a></li>
      <li class="h">FPS</li>
      <li><a href="#fps/shooter">fps / shooter</a></li>
      <li class="h">Post Processing</li>
      <li><a href="#post-processing/basic-glitch">postprocessing / basic-glitch</a></li>
      <li class="h">Performance</li>
      <li><a href="#performance/sticks">performance / sticks</a></li>
      <li><a href="#performance/softbodies">performance / softbodies</a></li>
    </ul>
  </div>

  <a class="source" href="/" target="_blank">Source code</a>

  <script type="text/javascript">
    var iframe = document.createElement('iframe');
    var isLocal = window.location.hostname.indexOf('surge.sh') <= 0;
    var rootPath = isLocal ? '' : '/examples';
    var link = window.location.hash ? '/' + window.location.hash.substring(1, window.location.hash.length) : '/basic/helloworld';

    iframe.src = rootPath + link;
    document.querySelector('a.source').href = 'https://github.com/WhitestormJS/whitestorm.js/tree/dev/src/examples/' + link + '/script.js';

    document.body.appendChild(iframe);
    var links = document.querySelectorAll('a');

    for (var i = 0, max = links.length; i < max; i++) {
      links[i].addEventListener('click', function() {
        window.location.reload();
      });
    }
  </script>
  </body>
</html>
